<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>存款业务信息管理</title>
    <link rel="stylesheet" href="/static/style.css">
    <style>
        .manage-container { max-width: 1200px; margin: 40px auto; background: #fff; border-radius: 16px; box-shadow: 0 8px 32px rgba(45,140,240,0.13); padding: 36px 48px; }
        .manage-container h2 { color: #2d8cf0; background: none; margin-bottom: 28px; font-size: 2.1rem; letter-spacing: 2px; }
        .manage-container .back-link { float: right; color: #2d8cf0; text-decoration: underline; font-size: 15px; }
        .manage-container form { margin-bottom: 24px; display: flex; align-items: center; flex-wrap: wrap; }
        .manage-container input[type="text"], .manage-container input[type="number"] { width: 220px; margin-right: 12px; padding: 8px; border-radius: 6px; border: 1px solid #d0d0d0; }
        .manage-container select { width: 120px; margin-right: 12px; padding: 8px; border-radius: 6px; border: 1px solid #d0d0d0; }
        .manage-container button, .manage-container a.button { background: linear-gradient(90deg, #2d8cf0 0%, #74ebd5 100%); color: #fff; border: none; padding: 8px 22px; border-radius: 6px; cursor: pointer; font-size: 15px; margin-right: 7px; text-decoration: none; display: inline-block; box-shadow: 0 2px 8px rgba(45,140,240,0.08); transition: background 0.2s, transform 0.1s; }
        .manage-container button:hover, .manage-container a.button:hover { background: linear-gradient(90deg, #1a6fb3 0%, #74ebd5 100%); transform: translateY(-2px) scale(1.04); }
        .manage-container table { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin-bottom: 32px; }
        .manage-container th, .manage-container td { padding: 14px 10px; text-align: center; background: #f7fafd; border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(45,140,240,0.04); }
        .manage-container th { background: #eaf4fd; color: #2d8cf0; font-size: 1.08rem; }
        .manage-container tr { transition: box-shadow 0.2s; }
        .manage-container tr:hover td { box-shadow: 0 4px 16px rgba(45,140,240,0.10); background: #f0f8ff; }
        .add-btn { margin-bottom: 18px; }
        .description-cell { max-width: 300px; text-align: left; padding: 10px; }
        /* 弹窗样式 */
        .modal-bg { display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.18); z-index: 1000; }
        .modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(45,140,240,0.18); padding: 32px 36px 20px 36px; z-index: 1001; min-width: 400px; }
        .modal h3 { color: #2d8cf0; margin-bottom: 18px; }
        .modal label { margin-right: 7px; display: inline-block; width: 80px; }
        .modal input, .modal select, .modal textarea { width: 250px; margin-bottom: 12px; padding: 7px; border-radius: 5px; border: 1px solid #d0d0d0; }
        .modal textarea { height: 80px; resize: vertical; }
        .modal .modal-actions { text-align: right; }
        .modal .modal-actions button { margin-left: 10px; }
        @media (max-width: 900px) {
            .manage-container { padding: 18px 4vw; }
            .manage-container table, .manage-container th, .manage-container td { font-size: 14px; }
        }
    </style>
</head>
<body>
    <div class="manage-container">
        <h2>存款业务信息管理 <a href="/admin/dashboard" class="back-link">返回管理员首页</a></h2>
        <form method="get" action="/admin/deposit_manage">
            <input type="text" name="query" placeholder="请输入业务名称或描述">
            <button type="submit">查询</button>
        </form>
        <button class="add-btn" onclick="showModal()">新增存款业务</button>
        <table>
            <tr>
                <th>存款编号</th>
                <th>存款名称</th>
                <th>存款描述</th>
                <th>操作</th>
            </tr>
            {% for business in businesses %}
            <tr>
                <td>{{ business.savingID }}</td>
                <td>{{ business.savingName }}</td>
                <td class="description-cell">{{ business.descrip }}</td>
                <td>
                    <a href="/admin/deposit_edit/{{ business.savingID }}" class="button">编辑</a>
                    <a href="/admin/deposit_delete/{{ business.savingID }}" class="button" style="background:linear-gradient(90deg,#f56c6c 0%,#fbbf24 100%)" onclick="return confirm('确定删除？')">删除</a>
                </td>
            </tr>
            {% endfor %}
        </table>
        <!-- 警告弹窗 -->
        <div class="modal-bg" id="alertModalBg" style="display:none;">
            <div class="modal">
                <h3 style="color:#f56c6c;">操作失败</h3>
                <div id="alertMsg" style="color:#f56c6c;margin-bottom:18px;"></div>
                <div class="modal-actions">
                    <button type="button" onclick="hideAlertModal()">关闭</button>
                </div>
            </div>
        </div>
        <!-- 新增存款业务弹窗 -->
        <div class="modal-bg" id="modalBg">
            <div class="modal">
                <h3>新增存款类型</h3>
                <form method="post" action="/admin/deposit_add">
                    <label>存款名称：</label><input type="text" name="savingName" required><br>
                    <label>存款描述：</label><textarea name="descrip" required></textarea><br>
                    <div class="modal-actions">
                        <button type="button" onclick="hideModal()">取消</button>
                        <button type="submit">添加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        function showModal() {
            document.getElementById('modalBg').style.display = 'block';
        }
        function hideModal() {
            document.getElementById('modalBg').style.display = 'none';
        }
        function showAlertModal(msg) {
            document.getElementById('alertMsg').innerText = msg;
            document.getElementById('alertModalBg').style.display = 'block';
        }
        function hideAlertModal() {
            document.getElementById('alertModalBg').style.display = 'none';
        }
        document.getElementById('modalBg').onclick = function(e) {
            if(e.target === this) hideModal();
        }
        document.getElementById('alertModalBg').onclick = function(e) {
            if(e.target === this) hideAlertModal();
        }
        // 自动弹窗（如有错误）
        {% for category, msg in get_flashed_messages(with_categories=true) %}
            {% if category == 'error' %}
                showAlertModal("{{ msg }}");
            {% endif %}
        {% endfor %}
    </script>
</body>
</html> 